<template>
    <div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"  >
        <el-form-item label="公寓名称" prop="flatName">
          <el-input v-model="ruleForm.flatName"></el-input>
        </el-form-item>

        <template>
              <label>楼盘名称:<input v-model="ruleForm.buildingName" class="lineinput" style="width:200px" size="mini"></label>
            <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler"
                       :scroll-wheel-zoom="true"
                       @click="clickEvent"
                       ak="gCp7NMFEdRgeabbmbESwXHtly6obtTGg">
              <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
              <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
              <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"  :showAddressBar="true" :autoLocation="true" @locationSuccess="getLoctionSuccess" ></bm-geolocation>
              <bm-view :style="{width:'100%',height: '300px',flex: 1,marginTop:'0px'}"></bm-view>
              <bm-local-search :keyword="ruleForm.buildingName" :auto-viewport="false" :location="ruleForm.buildingName" style="height: 150px;overflow-y: scroll;margin: 2px 0"></bm-local-search>
            </baidu-map>
            <div class="demo-input-suffix" style="margin-top: 2vh">
              <el-link type="info">经度：</el-link><el-input  class="lineinput"  style="width:200px" size="mini" v-model.number="locData.longitude" :disabled="true"></el-input>
              <el-link type="info"> 纬度：</el-link><el-input  class="lineinput"  style="width:200px" size="mini" v-model.number="locData.latitude" :disabled="true"></el-input>
              <el-link type="info"> 位置：</el-link><el-input  class="lineinput"  style="width:200px" size="mini" v-model="locData.address" :disabled="true"></el-input>
            </div>

        </template>

<!-- <iframe name="iframeA" :src=url frameborder="0"  style="width: 100%;height:500px;" scrolling="no" ref="mapFrame"></iframe>-->

        <!--<baidu-map :center="{lng:	116.395645,lat:39.929986} " zoom="17" style="height:300px"></baidu-map>-->
        <el-form-item label="公共配套"   prop="publicFacility" >
          <el-checkbox-group  v-model="ruleForm.publicFacility" >
            <span v-for="items in ruleForm.publicFacilitys">

               <el-checkbox :label="items.value" :value="items.value">{{items.name}}</el-checkbox>
            </span>

          </el-checkbox-group>

        </el-form-item>
        <el-form-item label="公共区域图片" prop="pictureUrl">
          <el-upload
            class="avatar-uploader"
            action="http://localhost/dev-api/file/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

          <el-button type="primary" @click="upfile">预览</el-button>
          <el-image  :src="ruleForm.ups" style='max-height:100px;max-width:100px;'></el-image>
        </el-form-item>
        <el-form-item label="付款方式" prop="paymentMortgage">
          押
          <el-select v-model="ruleForm.paymentMortgage" placeholder="请选择">
            <el-option
              v-for="item in typeOneOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          付
          <el-select v-model="ruleForm.paymentPay" prop="paymentPay" placeholder="请选择">
            <el-option
              v-for="item in typeTwoOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="户型" prop="room">
          <el-select v-model="ruleForm.room" placeholder="请选择">
            <el-option
              v-for="item in houseTypeOneOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          室
          <el-select v-model="ruleForm.hall" prop="hall" placeholder="请选择">
            <el-option
              v-for="item in houseTypeTwoOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          厅
        </el-form-item>
        <el-form-item label="公共装修情况" prop="publishStatus">
          <el-select v-model="ruleForm.publishStatus" placeholder="请选择">
            <el-option
              v-for="item in publicOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设置管家" prop="manager">
          <el-select v-model="ruleForm.manager" placeholder="请选择">
            <el-option
              v-for="item in manageOpt"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房源介绍" prop="introduce">
          <el-input v-model="ruleForm.introduce" type="textarea"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="dialogFormVisible =true">添加房型</el-button>
        </el-form-item>
        <el-dialog title="添加房型" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="房型名称" :label-width="formLabelWidth">
              <el-input v-model="ruleForm.buildingName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="面积" :label-width="formLabelWidth">
              <el-input v-model="ruleForm.proportion" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="朝向" :label-width="formLabelWidth">
              <el-select v-model="ruleForm.direction" placeholder="请选择">
                <el-option
                  v-for="item in roomOpt"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="独立配置" :label-width="formLabelWidth" prop="privateFacility">

                <el-checkbox-group  v-model="ruleForm.privateFacility">
                  <span v-for="item in ruleForm.privateFacilityOpt" >
                  <el-checkbox  :label="item.label" :value="item.value"></el-checkbox>
                     </span>
                </el-checkbox-group>


            </el-form-item>
          </el-form>
          <el-form-item label="租金" :label-width="formLabelWidth">
            <el-input-number v-model="ruleForm.rental"  label="租金(元/月)"></el-input-number>元/月
          </el-form-item>
          <el-form-item label="独立区域图片" :label-width="formLabelWidth">
            <el-upload
              class="avatar-uploader"
              action="http://localhost/dev-api/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccesss"
              :before-upload="beforeAvatarUploads">
              <img v-if="imageUrls" :src="imageUrls" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>


<script>
  import { getManageOpt,getprivateFacilityOpt,addForm,getBaiDuMap } from "@/api/termination/focus";
  import {BaiduMap,BmNavigation,BmView,BmGeolocation,BmCityList,BmLocalSearch} from 'vue-baidu-map'
  import {Pagination} from "element-ui";
  let Base64 = require('js-base64').Base64
    export default {
        name: "index",
      data(){
          return {
            center: {lng: 111.752912, lat: 40.832246},
            zoom: 12,
            mapVisible:false,
            locData:{
              longitude:'',
              latitude:'',
              address:'',
            },
            iconUrl:'http://api0.map.bdimg.com/images/marker_red_sprite.png',
            url:"https://map.baidu.com/@12961205,4823961,13z",
            formLabelWidth:"120px",
            imageUrl:"",
            ups:[],
            dialogFormVisible:false,
            imageUrls:"",
            map: null,
            local: null,
            localList: [], // 搜索地址列表
            shopaddress: '', // 详细地址
            loading: false,
            restaurants: [],


            form:[{

            },],
            roomOpt:[
              {
                value:"1",
                label:"东"
              },
              {
                value:"2",
                label:"南"
              },
              {
                value:"3",
                label:"西"
              },
              {
                value:"4",
                label:"北"
              },
              {
                value:"5",
                label:"东南"
              },
              {
                value:"6",
                label:"东北"
              },
              {
                value:"7",
                label:"西南"
              },
              {
                value:"8",
                label:"西北"
              },
            ],
            publicOpt:[
              {
                value:"0",
                label:"精装"
              },
              {
                value:"1",
                label:"简装"
              },
              {
                value:"2",
                label:"毛坯"
              }
            ],
            typeOneOpt:[
              {
                value:"0",
                label:"0"
              },
              {
                value:"1",
                label:"1"
              },
              {
                value:"2",
                label:"2"
              },
              {
                value:"3",
                label:"3"
              },
            ],
            typeTwoOpt:[
              {
                value:"1",
                label:"1"
              },
              {
                value:"2",
                label:"2"
              },

              {
                value:"3",
                label:"3"
              },
              {
                value:"4",
                label:"4"
              },
              {
                value:"5",
                label:"5"
              },
              {
                value:"6",
                label:"6"
              },
            ],
            houseTypeOneOpt:[{
              value:"1",
              label:"1"
            },
              {
                value:"2",
                label:"2"
              },
              {
                value:"3",
                label:"3"
              },
              {
                value:"4",
                label:"4"
              },
              {
                value:"5",
                label:"5"
              },
              {
                value:"6",
                label:"6"
              },
              {
                value:"7",
                label:"7"
              },
              {
                value:"8",
                label:"8"
              },
              {
                value:"9",
                label:"9"
              },

            ],
            houseTypeTwoOpt:[
              {
                value:"0",
                label:"0"
              },
              {
                value:"1",
                label:"1"
              },
              {
                value:"2",
                label:"2"
              },

            ],
            manageOpt:[],
            ruleForm: {
              address: '',
              longitude: '', // 经度
              latitude: '', // 纬度
              roomName: '',
              buildingName: '',
              publicFacility: [],
              publicfacility:"",
              privatefacility:"",
              roompictureUrl: '',
              housepictureUrl: '',
              delivery: false,
              type: [],
              paymentMortgage: '',
              paymentPay: '',
              room:"",
              ups:"",
              hall:"",
              publicType:"",
              manager:"",
              publishStatus:"",
              roomType:"",
              typeOne:"",
              typeTwo:"",
              privateFacilityOpt:[],
              flatName:"",
              proportion:"",
              direction:"",
              privateFacility:[],
              publicFacilitys:[
                {
                  value:"1",
                  name:"客厅"
                },
                {
                  value:"2",
                  name:"卫生间"
                },
                {
                  value:"3",
                  name:"休闲区"
                },
                {
                  value:"4",
                  name:"会客厅"
                },
                {
                  value:"5",
                  name:"书吧"
                },
                {
                  value:"6",
                  name:"健身房"
                },
                {
                  value:"7",
                  name:"阳台"
                },
                {
                  value:"8",
                  name:"厨房"
                },
                {
                  value:"9",
                  name:"空调"
                },
                {
                  value:"10",
                  name:"洗衣机"
                },
                {
                  value:"11",
                  name:"电视"
                },
                {
                  value:"12",
                  name:"热水器"
                },
                {
                  value:"13",
                  name:"冰箱"
                },
                {
                  value:"14",
                  name:"沙发"
                },
                {
                  value:"15",
                  name:"餐桌椅"
                },
                {
                  value:"16",
                  name:"宽带"
                },
                {
                  value:"17",
                  name:"车位"
                },
                {
                  value:"18",
                  name:"洗衣房"
                },
                {
                  value:"19",
                  name:"保洁服务"
                },
                {
                  value:"20",
                  name:"前台"
                },
                {
                  value:"21",
                  name:"水吧"
                },
                {
                  value:"22",
                  name:"影音区"
                },
                {
                  value:"23",
                  name:"其他"
                },
              ],

            },
            rules: {
              flatName: [
                { required: true, message: '请输入公寓名称', trigger: 'blur' },
                { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
              ],
              buildingName: [
                { required: true, message: '请输入楼盘公寓名称', trigger: 'blur' },
                { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
              ],
              publicFacility: [
                { type: 'array', required: true, message: '至少选择一个公共配套设备', trigger: 'change' }
              ],
              privateFacility: [
                { type: 'array', required: true, message: '至少选择一个私人配套设备', trigger: 'change' }
              ],
              introduce:[
                { required: true, message: '请输入房源介绍', trigger: 'blur' },
                { min: 5, max: 100, message: '长度在 5 到 100 个字符', trigger: 'blur' }
              ],
              paymentMortgage:[
                { required: true, message: '请选择付款方式', trigger: 'change' }
              ],
              paymentPay:[
                { required: true, message: '请选择付款方式', trigger: 'change' }
              ],
              room:[
                { required: true, message: '请选择户型', trigger: 'change' }
              ],
              hall:[
                { required: true, message: '请选择户型', trigger: 'change' }
              ],
              publishStatus:[
                { required: true, message: '请选择公共装修情况', trigger: 'change' }
              ],
              manager:[
                { required: true, message: '请选择管家', trigger: 'change' }
              ],
            },


          }
      },
      watch: {

      },
      mounted() {
      },

      methods:{
        getprivateFacilityOpt(){
          getprivateFacilityOpt().then(resp=>{
            this.ruleForm.privateFacilityOpt = resp.data
          })
        },
          getManageOpt(){
            getManageOpt().then(resp=>{
              this.manageOpt = resp.data
            })
          },
        handleAvatarSuccess(res, file) {
          this.imageUrl = URL.createObjectURL(file.raw);
          this.ruleForm.roompictureUrl = res.data.url
        },
        beforeAvatarUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        handleAvatarSuccesss(res, file) {
          this.imageUrls = URL.createObjectURL(file.raw);
          this.ruleForm.housepictureUrl = res.data.url
        },
        beforeAvatarUploads(file) {
          const isJPG = file.type === 'image/jpeg';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
          }
          if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isJPG && isLt2M;
        },
        upfile(){
          var url = this.ruleForm.housepictureUrl;
          window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(url)));
        },
        submitForm(formName) {

          this.ruleForm.publicfacility = this.ruleForm.publicFacility.join()

         this.ruleForm.privatefacility =  this.ruleForm.privateFacility.join()
          this.$refs[formName].validate((valid) => {
            if (valid) {
                addForm(this.ruleForm).then(resp=>{
                  if(resp>0){
                    alert("添加成功")
                  }else{
                    alert("添加失败")
                  }
                })
            } else {
              alert("提交失败")
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },

        handler ({BMap, map}) {
          let _this = this;  // 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
          let geolocation = new BMap.Geolocation();
          geolocation.getCurrentPosition(function(r){
            console.log(r);
            _this.center = {lng: r.longitude, lat: r.latitude};   // 设置center属性值
            _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};  // 自定义覆盖物
            _this.initLocation = true;
          },{enableHighAccuracy: true})
          window.map = map;
        },
        //点击地图监听
        clickEvent(e){
          map.clearOverlays();
          let Icon_0 = new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 25)});
          let myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat),{icon: Icon_0});
          map.addOverlay(myMarker);
          //用所定位的经纬度查找所在地省市街道等信息
          let point = new BMap.Point(e.point.lng, e.point.lat);
          let gc = new BMap.Geocoder();
          let _this = this;
          gc.getLocation(point, function (rs) {
            let addComp = rs.addressComponents;
            _this.locData.address = rs.address;

          });
          this.locData.longitude = e.point.lng;
          this.locData.latitude = e.point.lat;
        },
//定位成功回调
        getLoctionSuccess(point, AddressComponent, marker){
          map.clearOverlays();
          let Icon_0 = new BMap.Icon("http://api0.map.bdimg.com/images/marker_red_sprite.png", new BMap.Size(64, 64), {anchor: new BMap.Size(18, 32),imageSize: new BMap.Size(36, 36)});
          let myMarker = new BMap.Marker(new BMap.Point(point.point.lng, point.point.lat),{icon: Icon_0});
          map.addOverlay(myMarker);
          this.locData.longitude = point.point.lng;
          this.locData.latitude = point.point.lat;
        },
//返回选中点的位置
        findlocation(){
          this.$emit("findlocdata",this.locData)
          this.temp.location=this.keyword
          this.temp.lng=this.locData.longitude
          this.temp.lat=this.locData.latitude
          this.mapVisible = false
        },
      },
      components: {
        Pagination,
        BaiduMap,
        BmNavigation,
        BmView,
        BmGeolocation,
        BmCityList,
        BmLocalSearch
      },
      created() {
       this.getManageOpt();
       this.getprivateFacilityOpt();
      }
    }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
